<template>
  <div>
    <searchbar></searchbar>
    <tabbtn v-on:tabChange="tabChange" v-bind:tabs="tab" v-bind:num="num"></tabbtn>
    <transition name="van-fade">
      <recommend v-if="num==0"></recommend>
      <subpage v-if="num==1"></subpage>
      <subpage v-if="num==2"></subpage>
    </transition>
  </div>
</template>

<script>
  import searchbar from './searchbar'
  import tabbtn from './tabbtn'
  import recommend from './subpage/recommend'
  import subpage from './subpage/subpage1'

  export default {
    name: 'home',
    components: {
      tabbtn,
      searchbar,
      recommend,
      subpage

    },
    data() {
      return {
        num: 0,
        tab: [
          {
            name: "推荐",
            id: "recommend"
          },
          {
            name: "0元团",
            id: "s123"
          },
          {
            name: "田园蔬菜",
            id: "s456"
          },
          {
            name: "0元团",
            id: "s123"
          },
          {
            name: "田园蔬菜",
            id: "s456"
          },
          {
            name: "0元团",
            id: "s123"
          },
          {
            name: "田园蔬菜",
            id: "s456"
          }
        ]
      }
    },
    methods: {
      tabChange: function (v) {
        this.num = v;
      }
    },

  }
</script>

<style scoped>

</style>
